<template>
  <div>
    <CommCard title="累计用户数" :count="usersTotal | numberFormat">
      <template #main>
        <v-chart autoresize :options="getOption()"></v-chart>
      </template>
      <template #bottom>
        <div class="bottom">
          <div class="bottomItem">
            <span>日同比</span>
            <span>{{ userGrowthLastDay }}%</span>
            <div :class="userGrowthLastDay > 0 ? 'up' : 'down'"></div>
          </div>
          <div class="bottomItem">
            <span>月同比</span>
            <span>{{ userGrowthLastMonth }}%</span>
            <div :class="userGrowthLastMonth > 0 ? 'up' : 'down'"></div>
          </div>
        </div>
      </template>
    </CommCard>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "TotalUser",
  computed: {
    ...mapState({
      usersTotal: state => state.echarts.echartsData.usersTotal,
      usersLastDay: state => state.echarts.echartsData.usersLastDay,
      usersLastMonth: state => state.echarts.echartsData.usersLastMonth,
      userGrowthLastDay: state => state.echarts.echartsData.userGrowthLastDay,
      userGrowthLastMonth: state =>
        state.echarts.echartsData.userGrowthLastMonth
    })
  },
  methods: {
    getOption() {
      return {
        grid: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0
        },
        // x轴
        xAxis: {
          type: "value",
          min: 0,
          max: this.usersTotal,
          show: false
        },
        yAxis: {
          type: "category",
          show: false
        },
        tooltip: {},
        series: {
          type: "bar",
          data: [this.usersTotal - this.usersLastMonth],
          // 柱条的宽度
          barWidth: "30%",
          // 是否显示柱条的背景色
          showBackground: true,
          label: {
            show: true,
            formatter: "|",
            position: "right",
            distance: 40
          }
        },
        color: "#346c9c"
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.bottom {
  display: flex;
  .bottomItem {
    display: flex;
    span {
      margin-right: 5px;
    }
  }
}
</style>
